<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        button {
            padding: 5px;
            margin: 5px;
        }

        button.active {
            background: red;
        }

        #root div {
            width: 500px;
            height: 300px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div id="root">
    <button>中国</button>
    <button>日本</button>
    <button>韩国</button>
    <div>中国新闻</div>
    <div>日本新闻</div>
    <div>韩国新闻</div>
</div>
</body>
<script>
    // 初始化
    // 设置一个变量，通过该变量来控制显示哪一个（当前被选中）
    const btns = document.querySelectorAll("#root button");
    const divs = document.querySelectorAll("#root div");
    let activeIndex = 0;
    btns[activeIndex].className = "active";
    divs.forEach((div, index) => {
        div.style.display = activeIndex === index ? "block" : "none";
    })
</script>
</html>